<!-- ============================================================== -->
<!-- Left Sidebar - style you can find in sidebar.scss  -->
<!-- ============================================================== -->
<aside class="left-sidebar">
    <!-- Sidebar scroll-->
    <div class="scroll-sidebar">
        <!-- User profile -->
        <div class="user-profile" style="background: url(assets/images/background/user-info.jpg) no-repeat;">
            <!-- User profile image -->
            <div class="profile-img"> <img src="assets/images/users/profile.png" alt="user" /> </div>
            <!-- User profile text-->
            <div class="profile-text"> <a href="#" class="dropdown-toggle u-dropdown" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true">Markarn Doe</a>
                <div class="dropdown-menu animated flipInY">
                    <a href="#" class="dropdown-item"><i class="ti-user"></i> My Profile</a>
                    <a href="#" class="dropdown-item"><i class="ti-wallet"></i> My Balance</a>
                    <a href="#" class="dropdown-item"><i class="ti-email"></i> Inbox</a>
                    <div class="dropdown-divider"></div> <a href="#" class="dropdown-item"><i class="ti-settings"></i> Account Setting</a>
                    <div class="dropdown-divider"></div> <a href="login.html" class="dropdown-item"><i class="fa fa-power-off"></i> Logout</a>
                </div>
            </div>
        </div>
        <!-- End User profile text-->
        <!-- Sidebar navigation-->
        <nav class="sidebar-nav">
            <ul id="sidebarnav">
                <!-- IMPORTANT -->
                <!-- ng-container is useful when you don't want to wrap them with another element. -->
                <!-- Hope this saves you -->
                <ng-container *ngFor="let item of menuItems; let i = index;">
                    <li class="nav-small-cap">{{item.title}}</li>
                    <li *ngFor="let firstLevelItem of item.items">
                        <a class="has-arrow waves-effect waves-dark" href="#" aria-expanded="false">
                            <i [class]="firstLevelItem.icon"></i><span class="hide-menu">{{firstLevelItem.title}}</span>
                        </a>
                        <ul aria-expanded="false" class="collapse">
                            <li *ngFor="let secondLevelItem of firstLevelItem.items">
                                <a [routerLink]="secondLevelItem.routerLink" routerLinkActive="active">{{secondLevelItem.title}}</a>
                            </li>
                        </ul>
                    </li>
                    <li class="nav-devider" *ngIf="i < menuItems.length - 1"></li>
                </ng-container>
            </ul>
        </nav>
        <!-- End Sidebar navigation -->
    </div>
    <!-- End Sidebar scroll-->
</aside>
<!-- ============================================================== -->
<!-- End Left Sidebar - style you can find in sidebar.scss  -->
<!-- ============================================================== -->